<template>
  <div class="list-drag-demo">
    <el-button @click="getData">获取数据（建议使用低速网络）</el-button>
    <div style="margin-top: 10px;"><el-progress type="circle" :percentage="progress" /></div>
    <div class="search">
      <el-input
        v-model="searchText"
        style="width: 100%"
        size="large"
        placeholder="Please Input"
        :suffix-icon="Search"
        @keyup.enter="getData"
      />
    </div>
    <div class="container">  
      <ul class="list">       
        <li v-for="item in datas" :key="item.ename">
          <a :href="'https://pvp.qq.com/web201605/herodetail/' + item.ename + '.shtml'" target="_blank">
            <img :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + item.ename + '/' + item.ename + '.jpg'" alt="" />
            <span v-html="highlightText(item.cname)"></span>            
          </a>
        </li>
      </ul>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { request } from '../ajax/ajax-xhr'
import { Search } from '@element-plus/icons-vue'
const progress = ref(0)
const datas = ref(null);
const searchText = ref(null)
const options = {
  url: 'https://study.duyiedu.com/api/herolist',
  method: 'get',
  onProgress: (e) => {
    // console.log("进度",e)
    console.log("进度值", (e.loaded/e.total*100).toFixed(2))
    progress.value = Number((e.loaded/e.total*100).toFixed(2))
  },
  data: null
}
// 转义正则表达式特殊字符
const escapeRegExp = (string) => {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

// 高亮文本函数
const highlightText = (text) => {
  if (!searchText.value.trim()) {
    return text
  }  
  const regex = new RegExp(`(${escapeRegExp(searchText.value)})`, 'gi')
  return text.replace(regex, '<span style="color: red; font-weight: bold;">$1</span>')
}

const getData = async () => {
  await request(options).then(res => {   
    console.log(res)
    datas.value = JSON.parse(res).data;
    console.log('shuju', datas.value)
  })
}
</script>

<style scoped>
.list-drag-demo {
  padding: 20px;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}

body {
  background: #ecedf2;
}
.container {
  width: 100%;
  margin: 1em auto;
}

.list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  justify-items: center;
  text-align: center;
  font-size: 14px;
  row-gap: 20px;
  color: #333;
}
.list img {
  width: 77px;
  height: 77px;
  display: block;
  margin-bottom: 5px;
  border: 2px solid #5f89cf;
  border-radius: 10px 0 10px 0;
}


</style>